<template>
  <BaseLayout>
    <q-intersection transition="scale">
      <div class="g-case">
        <div class="intro">
          <div class="intro-title">
            <h1>城市中最好的蛋糕店，為呈現給您更好的風味</h1>
            <p>THE BEST CAKE IN TOWN FOR YOUR BETTER TASTE</p>
          </div>
        </div>
        <div class="news">
          <div class="title">活動快訊</div>
          <div class="news-box">
            <div
              v-for="{ id, message, time } in newsList.slice(0, 3)"
              :key="id"
              class="news-item"
            >
              <p v-formatmonth class="time">{{ time }}</p>
              <p>{{ message }}</p>
            </div>
          </div>
          <router-link class="news-btn" to="">查看更多>>></router-link>
        </div>
      </div>
    </q-intersection>
    <div class="cake-content">
      <div class="jj_bt">～～深入人心～～</div>
      <div class="picMarquee-left">
        <div class="hd">
          <a class="next" />
          <a class="prev" />
        </div>
        <div class="bd">
          <div ref="cakeBox" class="image-slider">
            <div
              :class="[
                'image-slider-container',
                { 'image-slider-container-animation': !isPaused },
              ]"
              v-for="{ id, img, name } in cakeList"
              :key="id"
            >
              <img :src="`src/assets/images${img}`" />
              <div class="title1">{{ name }}</div>
            </div>
          </div>
        </div>
        <router-link class="more1" to="">查看更多>>></router-link>
      </div>
    </div>
    <div class="fine-products">
      <div
        v-for="fineProducts in fineProductList"
        :key="fineProducts.id"
        class="content"
      >
        <template v-if="fineProducts.id % 2 !== 0">
          <div class="content-left">
            <div class="title">
              <h2>{{ fineProducts.title }}</h2>
              <p>{{ fineProducts.introduce }}</p>
            </div>
            <div class="img-content">
              <img :src="`src/assets/images${fineProducts.img}`" alt="" />
            </div>
          </div>
          <div class="content-right">
            <div class="top">
              <img
                v-for="({ img }, index) in fineProducts.introduceImg.slice(
                  0,
                  2
                )"
                :key="index"
                :src="`src/assets/images${img}`"
                alt=""
              />
            </div>
            <div class="below">
              <img
                v-for="({ img }, index) in fineProducts.introduceImg.slice(-1)"
                :key="index"
                :src="`src/assets/images${img}`"
                alt=""
              />
            </div>
          </div>
        </template>
        <template v-else>
          <div class="content-right">
            <div class="top">
              <img
                v-for="({ img }, index) in fineProducts.introduceImg.slice(
                  0,
                  2
                )"
                :key="index"
                :src="`src/assets/images${img}`"
                alt=""
              />
            </div>
            <div class="below">
              <img
                v-for="({ img }, index) in fineProducts.introduceImg.slice(-1)"
                :key="index"
                :src="`src/assets/images${img}`"
                alt=""
              />
            </div>
          </div>
          <div class="content-left">
            <div class="title">
              <h2>{{ fineProducts.title }}</h2>
              <p>{{ fineProducts.introduce }}</p>
            </div>
            <div class="img-content">
              <img :src="`src/assets/images${fineProducts.img}`" alt="" />
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="commodity">
      <div class="commodity-title">～～蛋糕成品～～</div>
      <div class="commodity-list">
        <div
          v-for="{ id, title, price, img } in commodityList.slice(
            0,
            commodityEndIndex
          )"
          :key="id"
          class="commodity-items"
        >
          <div class="item-img">
            <img :src="`src/assets/images${img}`" />
          </div>
          <p class="title">{{ title }}</p>
          <p class="price">¥{{ price }}</p>
        </div>
      </div>
      <div class="commodity-more">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="100px"
          height="100px"
          viewBox="0 0 24 24"
          fill="#c07e5c"
          @click.prevent="commodityCurrentPage++"
        >
          <path d="M0 0h24v24H0z" fill="none" />
          <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
        </svg>
      </div>
    </div>
  </BaseLayout>
</template>

<script setup lang="ts">
import { ref, onMounted, onDeactivated, computed } from 'vue'
import { useHomeStore } from '@/stores/home'
import { NewsData, CakeData, FineProductData } from '@/constants/constantType'

const { getNews, getCake, getFineProducts, getCommodity } = useHomeStore()
const newsList = ref<NewsData[]>([])
const isPaused = ref<boolean>(false)
const cakeBox = ref<object | null>(null)
const cakeList = ref<CakeData[]>([])
const fineProductList = ref<FineProductData[]>([])
const commodityList = ref([])
const commodityCurrentPage = ref<number>(1)
const commodityPerPage = ref<number>(6)

const handleMouseEnter = () => {
  isPaused.value = true
}
const handleMouseLeave = () => {
  isPaused.value = false
}
const commodityEndIndex = computed(() => {
  return commodityCurrentPage.value * commodityPerPage.value
})
onMounted(async () => {
  newsList.value = await getNews()
  cakeList.value = await getCake()
  fineProductList.value = await getFineProducts()
  commodityList.value = await getCommodity()
  cakeBox.value.addEventListener('mouseenter', handleMouseEnter)
  cakeBox.value.addEventListener('mouseleave', handleMouseLeave)
})
onDeactivated(() => {
  cakeBox.value.removeEventListener('mouseenter', handleMouseEnter)
  cakeBox.value.removeEventListener('mouseleave', handleMouseLeave)
})
</script>

<style lang="scss" scoped>
@keyframes slide {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
.image-slider-container-animation {
  animation: slide 20s linear infinite;
}
</style>
